<template>
  <div class="headerSearch">
    <input type="search" v-model.trim="keyword" />
    <button @click="search">搜索</button>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { ref } from 'vue'
// import { Search } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const keyword = ref<string>('')
function search() {
  //当查询关键字与当前路由对象中的查询参数wd值不同时，才调用router.push()方法
  if (keyword.value !== route.query.wd) {
    router.push({
      path: '/search',
      query: { wd: keyword.value },
    })
  }
}
</script>

<style scoped lang="less">
.headerSearch {
  display: inline-block;
  position: relative;
  input {
    width: 400px;
    height: 30px;
  }
  button {
    position: absolute;
    right: 0px;
    top: 0;
    width: 60px;
    height: 30px;
    margin: 0;
    border: none;
    color: white;
    background-color: red;
    cursor: pointer;
  }
}
</style>
